html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: 'Roboto', sans-serif !important;
    font-size: 1rem;
    padding-top: 0rem;
    overflow-x: hidden;
}

.tarjeta {
    position: relative;
    width: 350px;
    height: 500px;
}

.tarjeta .cara {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    transition: .5s;
}

.tarjeta .frente {
    transform: perspective(600px) rotatey(0deg);
    box-shadow: 0 5px 10px #000;
}

.tarjeta .frente img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
}

.tarjeta .frente h3 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    color: #fff;
    background: rgba(0, 0, 0, .4);
    text-align: center;
}

.tarjeta .dorso {
    transform: perspective(600px) rotateY(180deg);
    background: #041c4c;
    padding: 15px;
    color: #f3f3f3;
    display: flex;
    flex-direction: column;
    
    text-align: center;
}

.tarjeta .dorso h3 {
    font-size: 30px;
    margin-top: 30px;
    letter-spacing: 2px;
}

.tarjeta .dorso p {
    letter-spacing: 1px;
}

.tarjeta:hover .frente {
    transform: perspective(600px) rotateY(180deg);
}

.tarjeta:hover .dorso {
    transform: perspective(600px) rotateY(360deg);
}

.cuadritos {
  display: grid;
}

.cuadrito  {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.cuadrito img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    transition: all 0.5s ease-in-out;
    transform: scale(1);
  }

.cuadrito p {
    color: #fff;
    margin: 0;
  }
.cuadrito h3 {
    position: absolute;
    bottom:50%;
    width: 100%;
    height: 45px;
    line-height: 45px;
    color: #fff;
    text-align: center;
}
 .cuadrito-text {
    padding: 0.625rem;
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    background: rgba(0, 0, 0, 0.6%);
    transition: transform 1s;
  }
.cuadrito:hover img {
    opacity: 1;
   }
.cuadrito:hover .cuadrito-text {
    transform: translateY(0);
    transition: transform 0.3s;
    }
.timeline-v{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px 0;
            position: relative;
        }

.timeline-v:before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 100%;
            background: #007bff;
            transform: translateX(-50%);
            z-index: 1;
        }
.timeline-item-v {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            text-align: center;
            margin-bottom: 20px;
            flex: 1;
            width: 100%;
        }
.timeline-badge-v {
            background: #007bff;
            color: white;
            width: 20px;
            height: 20px;
            display: inline-block;
            text-align: center;
            border-radius: 50%;
            position: relative;
            z-index: 2;
        }

.timeline-content-v {
            margin-top: 10px;
            width: 60%;
            position: absolute;
        }

.timeline-item-v:nth-child(odd) .timeline-content-v {
            left: 60%;
            /* Más cerca del punto */
            text-align: left;
        }

.timeline-item-v:nth-child(even) .timeline-content-v {
            right: 60%;
            /* Más cerca del punto */
            text-align: right;
        }
.timeline-h {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0;
        }

.timeline-item-h {
            position: relative;
            text-align: center;
            top: 50%;
            flex: 1;
        }

.timeline-item-h:before {
            content: '';
            position: absolute;
            top: 0%;
            left: 0;
            width: 100%;
            height: 5px;
            background: #007bff;
            z-index: -1;
        }

.timeline-item-h:first-child:before {
            left: 50%;
        }

.timeline-item-h:last-child:before {
            width: 50%;
        }

.timeline-badge-h {
            background: #007bff;
            color: white;
            width: 20px;
            height: 20px;
            display: inline-block;
            text-align: center;
            border-radius: 50%;
            position: relative;
            top: 20%;
            transform: translateY(-50%);
        }

.timeline-content-h {
            margin-top: 10px;
        }